<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>角色管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet">
    <style>
        /* 滚动条隐藏 */
        ::-webkit-scrollbar {
            display: none;
        }

        html {
            scrollbar-width: none;
        }

        /* 卡片样式优化 */
        .layui-card {
            transition: all 0.3s ease;
            border-radius: 8px;
            height: 320px; /* 设置卡片最小高度 */
        }

        /* 彩色阴影效果 */
        .layui-card {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        /* 鼠标悬停效果 */
        .layui-card:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 10px 25px rgba(41, 128, 185, 0.2);
        }

        /* 添加角色卡片的特殊样式 */
        .layui-col-md4:last-child .layui-card:hover {
            box-shadow: 0 10px 25px rgba(46, 204, 113, 0.2);
        }

        /* 统一卡片内元素样式 */
        .layui-card-header {
            height: 50px; /* 设置卡片头部高度 */
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .layui-card-body {
            height: calc(100% - 50px); /* 卡片主体高度根据头部高度计算 */
            display: flex;
            flex-direction: column;
        }

        .layui-row {
            height: 100%;
        }

        .layui-col-md3, .layui-col-md9 {
            height: 100%;
        }
    </style>
</head>
<body>
<div class="layui-bg-gray layui-padding-3">
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-col-space16">
                <!--现有角色卡片列表-->
                <div class="layui-col-md4 layui-anim layui-anim-scale" th:each="item : ${dataList}" th:id="'card'+${item.identity.id}">
                    <div class="layui-card layui-padding-1">
                        <div class="layui-card-header">
                            <span style="font-weight: bold; font-size: 20px;" th:text="${item.identity.name}" th:id="'title'+${item.identity.id}"></span>
                            <div style="float: right;">
                                <button type="button" class="layui-btn layui-btn-xs layui-btn-warm" lay-on="myEdit" th:name="${item.identity.name}" th:id="${item.identity.id}">编辑</button>
                                <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" lay-on="myDel" th:name="${item.identity.name}" th:id="${item.identity.id}">删除</button>
                                <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-on="myEnter" th:name="${item.identity.name}" th:id="${item.identity.id}">权限管理</button>
                            </div>
                        </div>
                        <div class="layui-card-body">
                            <div class="layui-row">
                                <div class="layui-col-md3" style="display: flex;align-items: center;justify-content: center;">
                                    <i class="layui-icon layui-icon-user" style="font-size: 100px; color: green;"></i>
                                </div>
                                <div class="layui-col-md9" style="padding-left: 10px;">
                                    <span class="layui-badge-rim" th:each="menu : ${item.menus}" th:text="${menu}" style="margin-left: 5px; margin-top: 5px;"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--添加角色的卡片-->
                <div class="layui-col-md4 layui-anim layui-anim-scale" id="lastCard">
                    <div class="layui-card layui-padding-1">
                        <div class="layui-card-header" style="text-align: center;">
                            <span style="font-weight: bold; font-size: 20px;">添加更多角色</span>
                        </div>
                        <div class="layui-card-body">
                            <div class="layui-row">
                                <div class="layui-col-md12" style="display: flex;align-items: center;justify-content: center;">
                                    <i class="layui-icon layui-icon-add-circle" style="font-size: 100px; color: green;" lay-on="myAdd"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/layui/layui.js"></script>
<script>
    layui.use(['layer', 'util', 'jquery'], function () {
        let layer = layui.layer;
        let util = layui.util;
        let $ = layui.jquery;

        const nxu = /^[\u4e00-\u9fa5]{2,10}$/;

        util.on('lay-on', {
            myEnter: function (data) {
                layer.open({
                    type: 2,
                    title: ' 管理【' + data[0].name + '】拥有的菜单权限',
                    area: ['520px', '500px'],
                    scrollbar: false,
                    content: ['/toRoleMenuEdit/' + data[0].id, 'no'],
                    end: function () {
                        location.reload();
                    }
                });
            },
            myEdit: function (data) {
                layer.prompt({title: '请输入角色的新名称', formType: 0, value: data[0].name}, function (text, index) {
                    if (!nxu.test(text)) {
                        layer.msg('内容不合法，请输入2-10个汉字！', {icon: 2});
                        return;
                    }

                    $.post("/doSetRole", {
                        id: data[0].id,
                        name: text
                    }, function (res) {
                        if (res) {
                            layer.close(index);
                            $('#title' + data[0].id).text(text);   // 修改页面上的角色名称
                            layer.msg('修改成功');
                        } else {
                            layer.msg('修改失败，请联系管理员');
                        }
                    });
                });
            },
            myDel: function (data) {
                layer.confirm('确定删除这个角色嘛？', {
                    btn: ['确定', '取消']
                }, function () {
                    $.get('/doDelRole/' + data[0].id, function (res) {
                        if (res) {
                            $('#card' + data[0].id).hide(500); // 0.5秒内逐渐隐藏
                            layer.msg('删除成功');
                        } else {
                            layer.msg('提示：当前角色用户数不为0，无法删除！');
                        }
                    });
                });
            },
            myAdd: function () {
                layer.prompt({title: '请输入新角色的名称', formType: 0}, function (text, index) {
                    if (!nxu.test(text)) {
                        layer.msg('内容不合法，请输入2-10个汉字！', {icon: 2});
                        return;
                    }
                    $.get('/doAddRole', {'name': text}, function (response) {
                        if (response) {
                            layer.close(index);
                            layer.msg('添加成功');
                            // 动态添加新角色的内容卡片
                            let newCard = `                <div class="layui-col-md4 layui-anim layui-anim-scale" id="card${response}">
                    <div class="layui-card layui-padding-1">
                        <div class="layui-card-header">
                            <span style="font-weight: bold; font-size: 20px;">${text}</span>
                            <div style="float: right;">
                                <button type="button" class="layui-btn layui-btn-xs layui-btn-warm" lay-on="myEdit" name="${text}" id="${response}">编辑</button>
                                <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" lay-on="myDel" name="${text}" id="${response}">删除</button>
                                <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-on="myEnter" name="${text}" id="${response}">权限管理</button>
                            </div>
                        </div>
                        <div class="layui-card-body">
                            <div class="layui-row">
                                <div class="layui-col-md3" style="display: flex;align-items: center;justify-content: center;">
                                    <i class="layui-icon layui-icon-user" style="font-size: 100px; color: dodgerblue;"></i>
                                </div>
                                <div class="layui-col-md9" style="padding-left: 10px;"></div>
                            </div>
                        </div>
                    </div>
                </div>`;
                            // 在添加角色的卡片前面插入新卡片
                            $('#lastCard').before(newCard);
                        } else {
                            layer.msg('添加失败，请联系管理员');
                        }
                    });
                });
            }
        });
    });
</script>
</body>
</html>